import React, { useState, useEffect } from 'react'
import './index.modules.scss'
import SearchView from '@/components/searchView/index'
import {
  Space,
  Table,
  Button,
  Modal,
  Card,
  message,
  Form,
  Input,
  Popconfirm,
  Pagination,
  Image
} from 'antd'
import {
  commodityList,
  commodityListDelete,
  logisticsNumberAdd,
  commoditySerach,
  commodityCreateExcel
} from '@/http/api/shopping'
let pageData = {
  page: 1,
  size: 10,
  total: 0
}

let typeList = [
  {
    title: '商品名称',
    type: 'inpute',
    model: 'productName'
  },
  {
    title: '收货人',
    type: 'inpute',
    model: 'consignee'
  },
  {
    title: '账号',
    type: 'inpute',
    model: 'account'
  },
  {
    title: '联系方式',
    type: 'inpute',
    model: 'phone'
  },
  {
    title: '物流编号',
    type: 'inpute',
    model: 'logisticsNumber'
  },
  {
    title: '状态',
    type: 'select',
    model: 'status',
    options: [
      { value: 0, label: '待发货' },
      { value: 1, label: '已发货' },
      { value: 2, label: '确认收货' },
      { value: 3, label: '退货中' },
      { value: 4, label: '已退款' }
    ]
  }
]
let _id = ''
let selectedRowsdata = []
const App = () => {
  const [messageApi, contextHolder] = message.useMessage()
  useEffect(() => {
    getList()
  }, [])
  const [dataSource, setDataSource] = useState([])
  const [isShowAdd, serIsShowAdd] = useState(false)
  const [form] = Form.useForm()
  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderNumber',
      align: 'center'
    },
    {
      title: '商品图',
      dataIndex: 'productImg',
      align: 'center',
      render: (productImg) => {
        return <Image width={80} height={80} src={productImg} />
      }
    },
    {
      title: '商品名',
      dataIndex: 'productName',
      align: 'center'
    },
    {
      title: '价格',
      dataIndex: 'price',
      align: 'center'
    },
    {
      title: '个数',
      dataIndex: 'count',
      align: 'center'
    },
    {
      title: '购买账号',
      dataIndex: 'phone',
      align: 'center'
    },
    {
      title: '地址',
      dataIndex: 'address',
      align: 'center'
    },
    {
      title: '收货人',
      dataIndex: 'consignee',
      align: 'center'
    },
    {
      title: '收货人电话',
      dataIndex: 'phone',
      align: 'center'
    },
    {
      title: '物流编号',
      dataIndex: 'logisticsNumber',
      align: 'center'
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      render: (status) => {
        if (status == 0) {
          return <span style={{ color: '#818181' }}>待发货</span>
        } else if (status == 1) {
          return <span style={{ color: '#57D38D' }}>已发货</span>
        } else if (status == 2) {
          return <span style={{ color: '#185BC4' }}>已收货</span>
        } else if (status == 3) {
          return <span style={{ color: '#FF3737' }}>退款中</span>
        } else {
          return <span style={{ color: '#818181' }}>已退款</span>
        }
      }
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (data) => (
        <Space size="middle">
          <Button
            onClick={() => {
              changeClickFn(data)
            }}
          >
            详情
          </Button>
          {data.status == 0 ? (
            <Button
              type="primary"
              onClick={() => {
                changeClickFn(data)
              }}
            >
              发货
            </Button>
          ) : (
            ''
          )}

          <Popconfirm
            title="删除"
            description="确定删除吗?"
            placement="top"
            onConfirm={() => {
              DeleteFn(data)
            }}
            onCancel={() => {
              message.error('取消删除')
            }}
            okText="是"
            cancelText="不"
          >
            <Button type="primary" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      selectedRowsdata = selectedRows.map((item) => {
        return item._id
      })
    }
  }
  // 获取列表
  const getList = async () => {
    pageData.appid = localStorage.getItem('appid')
    const res = await commodityList(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  // 点击编辑
  const changeClickFn = (data) => {
    let addData = { ...data }
    if (addData._id) {
      form.setFieldsValue(addData)
      _id = addData._id
    }
    serIsShowAdd(true)
  }
  // 发货
  const onFinish = async (data) => {
    let res = ''
    console.log(_id)
    data.appid = localStorage.getItem('appid')
    data.status = 1
    if (_id) {
      data._id = _id
      res = await logisticsNumberAdd(data)
      messageApi.success(res.data.message)
    }

    getList()
    serIsShowAdd(false)
    form.resetFields()
    _id = ''
  }
  const pageChangeFn = (page, pageSize) => {
    pageData.page = page
    pageData.size = pageSize
    getList()
  }
  const porpsData = async (data) => {
    pageData = {
      page: 1,
      size: 10,
      total: 0,
      appid: localStorage.getItem('appid'),
      ...data
    }
    const res = await commoditySerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  // 删除
  const DeleteFn = async (data) => {
    const res = await commodityListDelete({ id: data._id })
    messageApi.success(res.data.message)
    getList()
  }
  // 导出
  const exportExcel = async () => {
    let data = {
      id: 'all',
      appid: localStorage.getItem('appid')
    }
    if (selectedRowsdata.length != 0) {
      data.id = selectedRowsdata
    }
    const res = await commodityCreateExcel(data)
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const a = document.createElement('a')
    a.href = url
    a.download = '周边发货记录.xlsx'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
  }
  return (
    <div>
      <Card>
        <SearchView typeList={typeList} porpsData={porpsData}></SearchView>
        <div className="headerButton">
          {/* <Button
            style={{ marginRight: '10px' }}
            type="primary"
            onClick={() => {
              serIsShowAdd(true)
            }}
          >
            新增品牌型号
          </Button> */}
          <Button
            type="primary"
            onClick={() => {
              exportExcel()
            }}
          >
            导出发货信息
          </Button>
        </div>
        <Table
          rowSelection={{
            type: 'checkbox',
            ...rowSelection
          }}
          pagination={false}
          bordered
          rowKey="key"
          columns={columns}
          dataSource={dataSource}
        />
        <div className="Pagin">
          <Pagination
            onChange={pageChangeFn}
            defaultCurrent={pageData.page}
            total={pageData.total}
          />
        </div>
      </Card>
      <div>
        <Modal
          footer={[]}
          onCancel={() => {
            serIsShowAdd(false)
            form.resetFields()
          }}
          open={isShowAdd}
        >
          <Form
            labelCol={{
              span: 5
            }}
            wrapperCol={{
              span: 14
            }}
            layout="horizontal"
            style={{
              maxWidth: 800
            }}
            form={form}
            onFinish={onFinish}
          >
            <Form.Item
              label="订单号:"
              name="orderNumber"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" disabled />
            </Form.Item>

            <Form.Item
              label="商品名"
              name="productName"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" disabled />
            </Form.Item>
            <Form.Item
              label="个数"
              name="count"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" disabled />
            </Form.Item>
            <Form.Item
              label="价格"
              name="price"
              rules={[
                {
                  required: true,
                  message: '请选择'
                }
              ]}
            >
              <Input className="inputeStyle" disabled />
            </Form.Item>
            <Form.Item
              label="购买账号"
              name="account"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" disabled />
            </Form.Item>
            <Form.Item
              label="地址"
              name="address"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" disabled />
            </Form.Item>
            <Form.Item
              label="收货人"
              name="consignee"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" disabled />
            </Form.Item>
            <Form.Item
              label="电话"
              name="phone"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" disabled />
            </Form.Item>
            <Form.Item
              label="物流编号"
              name="logisticsNumber"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 6,
                span: 16
              }}
            >
              <Button
                type="primary"
                onClick={() => {
                  form.resetFields()
                  serIsShowAdd(false)
                }}
              >
                取消
              </Button>
              <Button
                style={{ marginLeft: '10px' }}
                type="primary"
                htmlType="submit"
              >
                确定
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </div>
      {contextHolder}
    </div>
  )
}
export default App
